<template>
  <boxContainer title="月度之星" :loading="loading" :height="125">
    <template #default>
      <el-carousel ref="carlRef" height="125" :interval="15000" direction="vertical" arrow="never" indicator-position="none">
            <el-carousel-item v-for="(item, index) in data" :key="index" >
                <div class="content-box flex flex-ai-c">
                  <div class="img-box">
                    <template v-if="item.userHeadUrl">
                      <img class="icon-head" :class="[`icon-${index+1}`]" :src="item.userHeadUrl" alt="">
                    </template>
                    <template v-else>
                      <img class="icon-head" :class="[`icon-${index+1}`]" src="https://bullet001.oss-cn-shanghai.aliyuncs.com/file-saas-img/%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F.png" alt="">
                    </template>
                    <img :src="require(`../../../assets/img/bi/top-${index+1}.png`)" alt="" class="icon-crown">
                  </div>
                  <div class="flex flex-jc-sb flex-1">
                    <div class="item">
                      <div class="t1 fc-orange fs-18">NO.{{ index+1 }}</div>
                      <div class="t1 fs-18">{{ item.userName }}</div>
                    </div>
                    <div class="item">
                      <div class="t2 fs-12">项目数</div>
                      <div class="t3 bold fs-18 mg-t-10">{{ item.projectCount }}</div>
                    </div>
                    <div class="item mg-r-20">
                      <div class="t2 fs-12">服务人数</div>
                      <div class="t3 bold fs-18 mg-t-10">{{ item.serviceCount }}</div>
                    </div>
                  </div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </template>
  </boxContainer>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import boxContainer from '@/components/box-container/index.vue';
import { monthRank } from '@/api/bi.ts';

let data = ref([]) as any
let carlRef = ref(null) as any
let loading = ref(false)
const getData = () => {
  loading.value = true
  monthRank({}, {
    loading: true
  }).then((res: any) => {
    loading.value = false
    if (res?.length) {
      data.value = res.slice(0, 3)
      setTimeout(() => {
        carlRef.value.setActiveItem(0)
      }, 0);
    }
  })
}

defineExpose({
  getData
})

onMounted(() => {
  getData()
});
</script>
<style scoped lang="stylus">
.img-box {
  position relative
  margin-right 12px
}
.icon-head {
  width 64px
  height 64px
  border-radius 32px
  border 1px solid
}
.icon-1 {
  border-color #FADC73
}
.icon-2 {
  border-color #8FABCE
}
.icon-3 {
  border-color #C1A573
}
.icon-crown {
  position absolute
  left -5px
  top -22px
  width 38px
  height 34px
}
.content-box {
  padding 0 16px
  color #fff
  height 125px
}
.fc-orange {
  color #E5751C
}
.t1 {
  font-family youSheBiaoTiHei
}
</style>
